<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <script src="../jquery/jquery-3.2.1.min.js"></script>
    <script src="../js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="../css/bootstrap.css">

</head>
<body>
<pre>
    <h3>
        BootStrap中的对话框modal()方法传递字符串参数有以下几种情况：
        toggle:触发之前如果有对话框是显示状态，调用modal("toggle")之后对话框会隐藏，如果是隐藏则会显示
        show:触发时显示对话框
        hide:触发时隐藏对话框
    </h3>
</pre>
<div class="container">

    <button class="btn btn-success" id="btn_open">点我</button>
    <div class="modal fade" id="myModal">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button class="close" id="btn_close">&times;</button>
                    <p class="modal-title">弹出框</p>
                </div>
                <div class="modal-body">
                    <p>弹出框内容</p>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-danger" data-dismiss="modal">关闭</button>
                    <button class="btn btn-primary">保存</button>
                </div>
            </div>
        </div>
    </div>

    <h4>下拉菜单</h4>
    <div class="dropdown">
        <a href="javaScript:" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
            下拉菜单<span class="caret"></span>
        </a>
        <ul class="dropdown-menu">
            <li><a href="javaScript:">CSS3</a></li>
            <li><a href="javaScript:">CSS3</a></li>
            <li><a href="javaScript:">CSS3</a></li>
            <li><a href="javaScript:">CSS3</a></li>
        </ul>
    </div>
    <h4>下拉菜单(javaScript触发)</h4>
    <div class="dropdown">
        <a href="javaScript:" class="btn btn-primary " id="dropMenu">
            下拉菜单<span class="caret"></span>
        </a>
        <ul class="dropdown-menu">
            <li><a href="javaScript:">CSS3</a></li>
            <li><a href="javaScript:">CSS3</a></li>
            <li><a href="javaScript:">CSS3</a></li>
            <li><a href="javaScript:">CSS3</a></li>
        </ul>
    </div>

    <h4>监听滚动</h4>

    <div id="navBar" class="navbar navbar-default">
        <div class="navbar-header">
            <a href="javaScript:" class="navbar-brand">滚动监听</a>
            <button class="navbar-toggle" data-target="#myCollapse" data-toggle="collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
        </div>
        <div class="collapse navbar-collapse" id="myCollapse">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#Home">首页</a></li>
                <li><a href="#Video">视频</a></li>
                <li><a href="#Picture">图片</a></li>
                <li class="dropdown">
                    <a class="dropdown-toggle" data-toggle="dropdown">
                        地图
                        <span class="caret"></span>
                    </a>
                    <ul class="dropdown-menu">
                        <li><a href="#baidu">百度</a></li>
                        <li><a href="#guge">谷歌</a></li>
                        <li><a href="#gaode">高德</a></li>
                    </ul>
                </li>
            </ul>
        </div>

    </div>

    <h4>Tab选项卡</h4>
    <pre>
       <h4>
           选项卡是由两部分组成:
           导航菜单：也就是Tab选项卡菜单，可以使用前面的导航组件来实现
           内容面板：使用class="tab-content"和class="tab-pane"样式类
           触发方式：
                    声明式触发：
                            在选项卡菜单的链接上添加data-toggle="tab"
                            在选项卡菜单链接上添加href=#内容面板ID，如果不是a标签
                                则可以使用data-target=#内容面板ID
                            内容面板都放在容器class="tab-content"中，而每个内容面板
                                都有一个唯一ID和上面的data-target或者href对应

                    JavaScript触发:
                        $("#myTabNav a").click(function(){
                                $(this).tab("show");
                            });
       </h4>
    </pre>
    <ul class="nav nav-tabs" id="myTabNav">
        <li><a href="#A" data-toggle="tab">公告</a></li>
        <li><a href="#B" data-toggle="tab">规则</a></li>
        <li><a href="#C" data-toggle="tab">论坛</a></li>
        <li><a href="#D" data-toggle="tab">安全</a></li>
        <li><a href="#E" data-toggle="tab">公益</a></li>
    </ul>
    <br/>
    <div class="tab-content">
        <div class="tab-pane" id="A" >公告的内容</div>
        <div class="tab-pane" id="B" >规则的内容</div>
        <div class="tab-pane" id="C" >论坛的内容</div>
        <div class="tab-pane" id="D" >安全的内容</div>
        <div class="tab-pane" id="E" >公益的内容</div>
    </div>

    <h4>Pills导航</h4>
    <ul class="nav nav-pills" id="myPillNav">
        <li><a href="#AA" data-toggle="pill">规则</a></li>
        <li><a href="#BB" data-toggle="pill">公告</a></li>
        <li><a href="#CC" data-toggle="pill">论坛</a></li>
        <li><a href="#DD" data-toggle="pill">安全</a></li>
        <li><a href="#EE" data-toggle="pill">公益</a></li>
    </ul>
    <br />
    <div class="tab-content">
        <div class="tab-pane fade in" id="AA">规则内容</div>
        <div class="tab-pane" id="BB">公告内容</div>
        <div class="tab-pane" id="CC">论坛内容</div>
        <div class="tab-pane" id="DD">安全内容</div>
        <div class="tab-pane" id="EE">公益内容</div>
    </div>
</div>
<div class="container " data-target="#navBar" data-spy="scroll" style="height: 100px; overflow: auto">
    <h3 id="Home">首页</h3>
    <p>
        ................
    </p>
    <h3 id="Video">视频</h3>
    <p>
        ................
    </p>
    <h3 id="Picture">图片</h3>
    <p>
        ................
    </p>
    <h3 id="Map">地图</h3>
    <p>
    <h4 id="baidu">百度</h4>
    <h4 id="guge">谷歌</h4>
    <h4 id="gaode">高德</h4>
    </p>
</div>
</body>
<script>
    $(function () {
        $("#btn_open").click(function () {
            $("#myModal").modal("toggle");
        });
        $("#btn_close").click(function () {
            $("#myModal").modal("toggle");
        });
        $("#dropMenu").click(function () {
            $(this).dropdown("toggle");
        });

        $("#myTabNav a").mouseover(function () {
            $(this).tab("show");
        });
        $("#myPillNav a").mouseover(function () {
            $(this).pill("show");
        });
    })
</script>
</html>